<template>
  <div class="cp-count">
    <div class="cp-count_minute">
      <img class="base-num_img" :src="getImageURL(minute1)" alt="" />
    </div>
    <div class="cp-count_minute">
      <img class="base-num_img" :src="getImageURL(minute2)" alt="" />
    </div>
    <div class="cp-count_colon">
      <img class="base-colon_img" src="./images/nums/num_bg2.png" alt="" />
    </div>

    <div class="cp-count_second">
      <img class="base-num_img" :src="getImageURL(second1)" alt="" />
    </div>
    <div class="cp-count_second">
      <img class="base-num_img" :src="getImageURL(second2)" alt="" />
    </div>
  </div>

  <div @click="resetCountDown">reset</div>
  <div @click="start">start</div>
</template>

<script lang="ts" setup>
import useCountDown from './useCountDown'

const {
  minute1,
  minute2,
  second1,
  second2,
  resetCountDown,
  start,
  getImageURL,
} = useCountDown()

defineExpose({
  start,
  resetCountDown,
})
</script>

<style lang="scss" scoped>
.cp-count {
  display: flex;
  justify-content: flex-start;

  &_colon {
    display: flex;
    align-items: center;
    width: 40px;

    > img {
      width: 100%;
    }
  }

  &_minute,
  &_second {
    width: 80px;
    text-align: center;

    .base {
      &-colon_img {
        // width: 40px;
        height: 140px;
        vertical-align: middle;
      }

      &-num_img {
        // width: 80px;
        height: 140px;
        vertical-align: middle;
      }
    }
  }
}
</style>
